<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
</head>
<body>
<div id="app">
    <h2>{{msg}}</h2>
    <!--    v-for就是对vue实例中的数据进行遍历-->
    <h1>遍历对象</h1>
    <h2 v-for="(value,key,index) in user">
        {{value}} {{key}} {{index}}
    </h2>
    <h1>遍历数组</h1>
    <h2 v-for="(school,index) in schools">
        {{index}}{{school}}
    </h2>
    <h1>遍历数组中的对象</h1>
    <h2 v-for="(user,index) in users" :key="user.id">
        {{index+1}} {{user.name.toUpperCase()}}
    </h2>
</div>
</body>
</html>
<!--引入vue js文件-->
<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
            el: "#app",//指定vue实例作用范围,
            data: {    //用来给vue实例定义数据
                msg: "hello vue",
                user: {name: "小陈", age: 23, bir: "2020-06-06"},
                schools:["北京","山东"],
                users:[
                    {id:1,name:"asd",age:23,bir:"2020"},
                    {id:2,name:"qw",age:25,bir:"2020"},
                    {id:3,name:"asd",age:21,bir:"2020"}
                ]
            },
            methods: {}
        }
    );
</script>